<template>
  <div>
    <el-dialog title="客户回收" :visible.sync="recyclingVisible" width="30%">
      <p>
        <svg-icon icon-class="customerRecycling"></svg-icon>
      </p>
      <p class="textOne">确认回收后,该客户将回收至:{{ deptName }}</p>
      <p class="textTwo">回收前,请您与该客户的负责人沟通后操作哦！</p>
      <p class="textThree">(备注：回收需逐层回收)</p>
      <div slot="footer">
        <el-button type="primary" @click="recyclingVisible = false">取消</el-button>
        <el-button type="primary" @click="activerecycling()">确认回收</el-button>
        <el-divider></el-divider>
      </div>
    </el-dialog>
    <el-dialog title="回收结果" :visible.sync="recyclingResultVisible" width="30%">
      <div>
        <p>回收成功，本次已回收至：{{ deptName }}</p>
      </div>
      <div slot="footer">
        <el-button type="primary" @click="recyclingResultVisible = false">返回</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { customerRecovery } from "@/api/customer/customerManage"
export default {
  props: {
    recyclingList: {
      type: Array,
      default: null,
    },
  },
  data() {
    return {
      recyclingVisible: false,
      recyclingResultVisible: false,
      deptName: null,
    }
  },
  mounted() {
    this.deptName = this.$store.state.user.deptName;
  },
  methods: {
    openDialog() {
      this.recyclingVisible = true;
    },
    closeDialog() {
      this.recyclingVisible = false;
    },
    openResultDialog() {
      this.closeDialog();
      this.recyclingResultVisible = true;
    },
    activerecycling() {
      const params = this.recyclingList;
      customerRecovery(params).then((res) => {
        if (res.code === 200) {
          this.openResultDialog();
        }
      }).catch(() => {
        console.log("error");
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.textOne {
  font-size: 18px;
}

.textTwo {
  color: #ccc;
  margin: 10px 0;
}

.textThree {
  color: #082aff;
}

.svg-icon {
  width: 48px;
  height: 48px;
}

p {
  text-align: center;
  line-height: 24px;
}
</style>
